我們又完成的一點，打勾~~，但第三點需要稍微改一下

• [x] 如何增加新的 field widget
• [x] 如何套用自定義的 template
• [ ] 如何綁定事件，調整模板來隱藏欄位值

今天來處理綁定事件並修改模板，把欄位值改到我們設定的隱藏元素，完成我們要的效果

首先，在 extend 傳入的物件增加一個屬性 events ，並增加對應的函式

// ironman_js/static/src/js/widget.js

// ...
const FieldTextButton = FieldText.extend({
		events: {
        'click .btn': '_onClickBtn',
    },
    // ...

		_onClickBtn: function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        console.log('Din don.');
    },
});
// ..

這裡事件綁定的內容如下

events: {
		// 綁定的事件類型: 對應的內部函式名稱
		'click' : 'onClickWidget',

		// 綁定的事件類型 [widget 內部 dom 物件: 選填]: 對應的內部函式名稱
		'click .custom-class': 'onClickCustomElement',
}

有寫過 jquery 的朋友，應該會蠻熟悉的

因為 odoo legacy js 大部分是使用 jquery 來處理，

而後續 owl.js 的出現，就是為了符合現在主流框架的習慣，且也能脫離 jquery 的緩慢

扯遠了，話題拉回來

所以當沒有指定內部 dom 物件時，預設為 widget 本身

各位可以自己試試看

上面改好後，重新整理畫面後點擊按鈕，觀察 console 有沒有出現 Din don

接下來完成效果，首先先改模板，將傳入的值放到 button 下方

<!-- ironman_js/static/src/xml/widget.xml -->
<t t-name="ironman.TextButton">
    <button class="btn btn-primary">點我看內容</button>
		<span class="d-none" t-esc="value"/>
</t>

接著調整一下 JS，增加傳入模板的值，

並針對點擊後，將按鈕隱藏、文字顯示

// ironman_js/static/src/js/widget.js

// ...
const FieldTextButton = FieldText.extend({
    // ...

		_renderReadonly: function () {
        let def = this._super(...arguments);
        let btn = qweb.render('ironman.TextButton', {
            value: this.value || '',
        });
        this.$el.empty().append($(btn));
        return def;
    },

    _onClickBtn: function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        this.$el.find('.btn').addClass('d-none');
        this.$el.find('span.d-none').removeClass('d-none');
    },
});
// ..

重新整理網頁後，就嘗試點擊按鈕，就能看到效果了

是不是很炫呢?

對，我知道版面很醜，練習用的就別在意太多了

有興趣的朋友自己調整吧